<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Virtual Keyboard</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

  <script type="text/javascript" src="vk_loader.js?vk_layout=CN%20Chinese%20Simpl.%20Pinyin&vk_skin=small" ></script>
  <style type="text/css">
      html, body {
          font: 12px Verdana, Arial, Tahoma;
      }
      table {
          border-collapse: collapse;
          padding: 0;
          margin: 0;
      }
      td {
          margin: 0;
          text-align: left;
          vertical-align: top;
      }
      td.layouts {
          font-size: 12px;
      }
      td.layouts a {
          white-space: nowrap;
          font-size: 11px;
          font-weight: bold;
          color: #555;
      }
      td.layouts a:hover {
          color: #000;
      }
      label {
          white-space: nowrap;
      }

      #skins a {
          position: relative;
      }
      #skins a img {
          border: 0;
          display: none;
          left: 0;
          position: absolute;
          top:100%;
      }
      #skins a:hover img {
          display: block;
      }

  </style>
 </head>
 <body><!-- test -->
Demos: [<a>Plain text</a>] |
[<a href="demo_popup.html">Popup mode</a>] |
[<a href="demo_iframe.html">IFrame mode (isolated from page)</a>] |
[<a href="richedit/tinymce/plugins/Jsvk/examples/simple.html">TinyMCE</a>] |
[<a href="richedit/tinymce3/plugins/Jsvk/examples/simple.html">TinyMCE 3</a>] |
[<a href="richedit/xinha/plugins/Jsvk/examples/simple.html">Xinha</a>]
  <h1 align="center">VirtualKeyboard demo page</h1>
  <table>
   <tr>
    <td rowspan="3" style="width: 40%">
     <form action="no.cgi" method="get">
      <div>
       <table>
        <tr>
         <td>
          Simple input:<br />
          <input name="testa" id="testa" type="text" onfocus="VirtualKeyboard.attachInput(this)" />
         </td>
         <td>
          Password (no keyboard animation):<br />
          <input name="test_pwd" id="test_pwd" type="password" class="VK_no_animate" onfocus="VirtualKeyboard.attachInput(this)" />
         </td>
        </tr>
        <tr>
         <td colspan="2">
          Text area:<br />
          <textarea name="testb" id="testb" type="text" cols="35" rows="6" style="font-size: 150%" wrap="soft" onfocus="VirtualKeyboard.attachInput(this)"></textarea>
         </td>
        </tr>
       </table>
      <div id="td"></div>
      <br />
      <input id="showkb" type="button" value="Keyboard" onclick="VirtualKeyboard.toggle('testb','td'); return false;" />
      </div>
     </form>
    </td>
    <td>
     <strong>Resources:</strong>
     <ul>
      <li><a href="http://bts.debugger.ru/index.php?tasks=all&project=5">Bugtracker</a></li>
      <li><a href="http://debugger.ru/projects/virtualkeyboard">Russian article</a></li>
      <li><a href="http://forum.dklab.ru/js/advises/VirtualKeyboard.html">Support forum</a></li>
      <li><a href="http://www.codeproject.com/jscript/jsvk.asp">English article</a></li>
     </ul>
    </td>
   </tr>
   <tr>
    <td>
     <strong>Layouts filter:</strong><br />
     <div id="lfilter" onclick="setFilter()">
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <strong>Skins</strong><br />
     <div id="skins"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td colspan="2" class="layouts">
     <br />
     <strong>Supported languagues:</strong><em>Links are persistent</em>
     <div id="layouts"></div>
    </td>
     <script type="text/javascript">
         /**
          *  Collects all selected filters and changes available layouts
          */
         function setFilter() {
             var filter = []
                ,cbxs = document.getElementsByTagName('input');
             for (var i=0,cL=cbxs.length; i<cL; i++) {
                 if (cbxs[i].checked)
                     filter.push(cbxs[i].value);
             }
             VirtualKeyboard.setVisibleLayoutCodes(filter);
         }


         EM.addEventListener(window,'domload',function(){
             /*
             *  building the list of language codes
             */
             var codes = VirtualKeyboard.getLayoutCodes()
                ,cont = document.getElementById('lfilter')
                ,html = []
             for (var i=0, cL=codes.length; i<cL; i++) {
                 html.push ("<td><label for='cbx"+i+"'><input id='cbx"+i+"' type='checkbox' value='"+codes[i]+"' />"+codes[i]+"</label></td>");
                 if (!((i+1)%10))
                     html.push('</tr><tr>');
             }
             cont.innerHTML = '<table><tr>'+html.join("")+'</tr></table>';

             /*
             *  open the keyboard
             */
             VirtualKeyboard.toggle('testb','td');

             /*
             *  building the list of layouts
             */
             var el = document.getElementById('layouts')
                ,lt = VirtualKeyboard.getLayouts()
                ,dl = window.location.href.replace(/[?#].+/,"")

             for (var i=0,lL=lt.length; i<lL; i++) {
                 var cl = lt[i];
                 cl = cl[0]+" "+cl[1];
                 lt[i] = "<a href='"+dl+"?vk_layout="+cl+"' onclick='VirtualKeyboard.switchLayout(this.title);return false;' title='"+cl+"' alt='"+cl+"' >"+cl+"</a>";
             }
             el.innerHTML += lt.join("&nbsp;| ");

             /*
             *  build the list of skins
             */
             var skins = ['winxp','simple','small','soberTouch','textual'].sort()
                ,html = []
                ,el = document.getElementById('skins')
             for (var i=0, sL=skins.length; i<sL; i++) {
                 var cs = skins[i]
                 html[i] = "<a href='"+dl+"?vk_skin="+cs+"' title='"+cs+"' alt='"+cs+"' >"+cs+
                            "<img src='"+dl.replace(/\/[^\/]+.html/i,"")+"/css/"+cs+"/thumbnail.png' title='"+cs+"' alt='"+cs+"' /></a>";
             }
             el.innerHTML = html.join("&nbsp;| ");
         });

     </script>
    </td>
   </tr>

  </table>
 </body>
</html>
